<template>
  <div class="product-detail-container">
    <!-- 顶部导航栏（与商城页面一致） -->
    <header class="header">
      <div class="container">
        <div class="header-content">
          <div class="logo">
            <h1>旅行商城</h1>
          </div>
          <nav class="nav">
            <ul>
              <li><a href="/my-shop" class="nav-link">首页</a></li>
              <li><a href="#" class="nav-link">景点门票</a></li>
              <li><a href="#" class="nav-link">酒店预订</a></li>
              <li><a href="#" class="nav-link">旅游套餐</a></li>
              <li><a href="#" class="nav-link">周边商品</a></li>
            </ul>
          </nav>
          <div class="user-actions">
            <el-button type="text" @click="login">登录</el-button>
            <el-button type="text" @click="register">注册</el-button>
          </div>
        </div>
      </div>
    </header>

    <!-- 商品详情内容 -->
    <div class="product-detail-content container">
      <el-row :gutter="40">
        <!-- 商品图片区域 -->
        <el-col :span="12">
          <div class="product-image-container">
            <img :src="currentImage" :alt="product.title" class="main-product-image" />
            <div class="thumbnail-container" v-if="product.images && product.images.length > 1">
              <img
                  v-for="(img, index) in product.images"
                  :key="index"
                  :src="img"
                  @click="currentImage = img"
                  :class="{ 'thumbnail-active': currentImage === img }"
                  class="product-thumbnail"
              />
            </div>
          </div>
        </el-col>

        <!-- 商品信息区域 -->
        <el-col :span="12">
          <div class="product-info">
            <h1 class="product-title">{{ product.title }}</h1>
            <div class="product-meta">
              <span class="product-id">商品ID: {{ product.id }}</span>
              <span class="product-sales">销量: {{ product.sales || 0 }}</span>
              <el-rate
                  v-model="product.rating"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}分"
              />
            </div>

            <div class="price-section">
              <div class="current-price">
                <span class="price-label">价格:</span>
                <span class="price-value">¥{{ product.price }}</span>
                <span class="discount-badge" v-if="product.discount">
                  {{ (product.discount * 10).toFixed(1) }}折
                </span>
              </div>
              <div class="original-price" v-if="product.originalPrice">
                <span class="price-label">原价:</span>
                <span class="price-value">¥{{ product.originalPrice }}</span>
              </div>
              <div class="saved-price" v-if="product.originalPrice">
                <span class="price-label">节省:</span>
                <span class="price-value">¥{{ (product.originalPrice - product.price).toFixed(2) }}</span>
              </div>
            </div>

            <div class="product-description">
              <h3>商品描述</h3>
              <p>{{ product.description || '暂无详细描述' }}</p>
            </div>



            <div class="delivery-info">
              <p><i class="el-icon-truck"></i> 快递: 免运费</p>
              <p><i class="el-icon-time"></i> 预计送达时间: 3-5个工作日</p>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 商品详情选项卡 -->
      <div class="product-tabs">
        <el-tabs type="border-card">
          <el-tab-pane label="商品详情">
            <div class="tab-content" v-html="product.detailHtml || '暂无详情内容'"></div>
          </el-tab-pane>
          <el-tab-pane label="用户评价">
            <div class="reviews-container">
              <div class="review-summary">
                <div class="overall-rating">
                  <span class="rating-value">{{ product.rating || 4.5 }}</span>
                  <el-rate
                      v-model="product.rating"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}分"
                  />
                  <span class="rating-count">({{ product.reviewCount || 0 }}条评价)</span>
                </div>
                <div class="rating-distribution">
                  <div class="rating-bar" v-for="n in 5" :key="n">
                    <span class="stars">{{ 6 - n }}星</span>
                    <el-progress
                        :percentage="getRatingPercentage(6 - n)"
                        :show-text="false"
                        :stroke-width="10"
                        color="#ff9900"
                    />
                    <span class="count">{{ getRatingCount(6 - n) }}</span>
                  </div>
                </div>
              </div>
              <div class="review-list">
                <div class="review-item" v-for="review in product.reviews || []" :key="review.id">
                  <div class="review-header">
                    <el-avatar :size="40" :src="review.userAvatar" />
                    <div class="review-user">
                      <span class="username">{{ review.username }}</span>
                      <el-rate
                          v-model="review.rating"
                          disabled
                          show-score
                          text-color="#ff9900"
                          score-template="{value}分"
                      />
                    </div>
                    <span class="review-date">{{ review.date }}</span>
                  </div>
                  <div class="review-content">
                    <p>{{ review.content }}</p>
                  </div>
                  <div class="review-images" v-if="review.images && review.images.length">
                    <img
                        v-for="(img, index) in review.images"
                        :key="index"
                        :src="img"
                        class="review-image"
                        @click="showImagePreview(img)"
                    />
                  </div>
                </div>
                <div class="no-reviews" v-if="!product.reviews || product.reviews.length === 0">
                  <p>暂无用户评价</p>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="常见问题">
            <div class="faq-container">
              <el-collapse v-model="activeFaqNames">
                <el-collapse-item
                    v-for="(faq, index) in product.faqs || []"
                    :key="index"
                    :title="faq.question"
                    :name="index"
                >
                  <div>{{ faq.answer }}</div>
                </el-collapse-item>
              </el-collapse>
              <div class="no-faqs" v-if="!product.faqs || product.faqs.length === 0">
                <p>暂无常见问题</p>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 相关推荐 -->
      <div class="related-products">
        <h2 class="section-title">相关推荐</h2>
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in relatedProducts" :key="item.id">
            <el-card class="product-card" shadow="hover" @click.native="goToProductDetail(item.id)">
              <img :src="item.imageUrl" alt="商品图" class="product-img" />
              <div class="product-info">
                <h4 class="product-title">{{ item.title }}</h4>
                <div class="product-price">
                  <span class="current-price">￥{{ item.price }}</span>
                  <span class="original-price" v-if="item.originalPrice">￥{{ item.originalPrice }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 页脚（与商城页面一致） -->
    <footer class="footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-section">
            <h4>关于我们</h4>
            <p>我们是一家专注于旅游服务的公司，提供景点门票、酒店预订、旅游套餐等服务。</p>
          </div>
          <div class="footer-section">
            <h4>联系我们</h4>
            <p>电话：400-123-4567</p>
            <p>邮箱：contact@travelshop.com</p>
          </div>
          <div class="footer-section">
            <h4>关注我们</h4>
            <div class="social-links">
              <a href="#" class="social-link"><i class="fa fa-weibo"></i></a>
              <a href="#" class="social-link"><i class="fa fa-wechat"></i></a>
              <a href="#" class="social-link"><i class="fa fa-instagram"></i></a>
              <a href="#" class="social-link"><i class="fa fa-twitter"></i></a>
            </div>
          </div>
        </div>
        <div class="copyright">
          <p>&copy; © 2025 G.T.I Security Organization All rights reserved.</p>
        </div>
      </div>
    </footer>

    <!-- 图片预览模态框 -->
    <el-dialog v-model="imagePreviewVisible" width="80%" top="5vh">
      <img :src="previewImage" style="width: 100%; max-height: 80vh; object-fit: contain;" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const route = useRoute();
const router = useRouter();

// 商品数据
const product = ref({
  id: 1,
  title: '故宫门票',
  price: 60,
  originalPrice: 80,
  discount: 0.75,
  imageUrl: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.hb4dYRpXgtZtA9Lp0TmUmgHaEz?w=240&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
  images: [
    'https://picsum.photos/seed/ticket1-1/800/800',
    'https://picsum.photos/seed/ticket1-2/800/800',
    'https://picsum.photos/seed/ticket1-3/800/800',
  ],
  categoryId: 1,
  stock: 100,
  sales: 256,
  rating: 4.5,
  reviewCount: 24,
  description: '故宫是中国明清两代的皇家宫殿，旧称紫禁城，位于北京中轴线的中心。北京故宫以三大殿为中心，占地面积约72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。',
  detailHtml: `
    <h3>产品详情</h3>
    <p>故宫是中国明清两代的皇家宫殿，旧称紫禁城，位于北京中轴线的中心。北京故宫以三大殿为中心，占地面积约72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。</p>
    <h4>开放时间</h4>
    <ul>
      <li>旺季（4月1日-10月31日）：08:30-17:00</li>
      <li>淡季（11月1日-3月31日）：08:30-16:30</li>
    </ul>
    <h4>注意事项</h4>
    <ol>
      <li>门票当日有效，过期作废</li>
      <li>请携带有效身份证件入园</li>
      <li>1.2米以下儿童免费</li>
      <li>60岁以上老人凭身份证可享受半价优惠</li>
    </ol>
  `,
  reviews: [
    {
      id: 1,
      username: '旅行爱好者',
      userAvatar: 'https://picsum.photos/seed/user1/40/40',
      rating: 5,
      date: '2023-05-15',
      content: '非常棒的体验，故宫的建筑太壮观了，电子票很方便，直接扫码入园，不用排队。',
      images: [
        'https://picsum.photos/seed/review1-1/200/200',
        'https://picsum.photos/seed/review1-2/200/200'
      ]
    },
    {
      id: 2,
      username: '文化探索者',
      userAvatar: 'https://picsum.photos/seed/user2/40/40',
      rating: 4,
      date: '2023-04-22',
      content: '故宫很大，建议早点去，可以逛一整天。讲解器很有帮助，了解了很多历史知识。',
      images: []
    }
  ],
  faqs: [
    {
      question: '电子票如何使用？',
      answer: '购买成功后，您将收到电子票二维码，可直接在入口处扫码入园，无需换票。'
    },
    {
      question: '可以退票吗？',
      answer: '未使用的门票在游玩日期前一天23:59前可申请全额退款，过期后不可退。'
    },
    {
      question: '儿童需要购票吗？',
      answer: '1.2米以下儿童免费，1.2-1.5米儿童可购买儿童票，1.5米以上需购买成人票。'
    }
  ]
});

// 相关商品
const relatedProducts = ref([
  {
    id: 2,
    title: '长城门票',
    price: 40,
    imageUrl: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.SQ6R8xfzpyOeqPkwCLG-pgHaE8?w=240&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
    categoryId: 1,
    description: '世界文化遗产，位于北京，被誉为"天下第一关"，是古代军事防御工程的杰出代表。',
  },
  {
    id: 3,
    title: '颐和园门票',
    price: 30,
    imageUrl: 'https://ts1.tc.mm.bing.net/th/id/R-C.f239bbec543d8938dd9b7a82655df6af?rik=sOBEAMv8vf1gZA&riu=http%3a%2f%2fimg1.qunarzz.com%2ftravel%2fd0%2f1410%2f13%2f13a7db6954db429f213a9cdb.jpg_r_1024x683x95_81ba6e70.jpg&ehk=4dqLpkpy7rBYOej45mAcJlHv0wFeB%2bva85P9wLT8OFc%3d&risl=&pid=ImgRaw&r=0',
    categoryId: 1,
  },
  {
    id: 4,
    title: '天坛公园门票',
    price: 15,
    imageUrl: 'https://ts1.tc.mm.bing.net/th/id/R-C.1b1688be7241d44ff375e728c4d040e3?rik=l%2bkJ9FTM6ssydw&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50020%2f5326.jpg_wh860.jpg&ehk=5rVmfq6XAV5G3wtZKmtVw00%2bCOoE2UZWZbT12Gv48HE%3d&risl=&pid=ImgRaw&r=0',
    categoryId: 1,
  },
  {
    id: 10,
    title: '九寨沟三日游',
    price: 1299,
    imageUrl: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.iBJ2n0ND5lbXMT6pD62_UQHaE1?w=272&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
    categoryId: 3,
  }
]);

// 当前显示的图片
const currentImage = ref(product.value.imageUrl);
// 购买数量
const quantity = ref(1);
// 展开的FAQ项
const activeFaqNames = ref([]);
// 图片预览相关
const imagePreviewVisible = ref(false);
const previewImage = ref('');

// 计算评价分布百分比
const getRatingPercentage = (stars) => {
  if (!product.value.reviews || product.value.reviews.length === 0) {
    return stars === 5 ? 60 : stars === 4 ? 25 : stars === 3 ? 10 : stars === 2 ? 3 : 2;
  }
  const count = product.value.reviews.filter(r => r.rating === stars).length;
  return (count / product.value.reviews.length) * 100;
};

// 获取各星级评价数量
const getRatingCount = (stars) => {
  if (!product.value.reviews || product.value.reviews.length === 0) {
    return stars === 5 ? 15 : stars === 4 ? 6 : stars === 3 ? 2 : stars === 2 ? 1 : 0;
  }
  return product.value.reviews.filter(r => r.rating === stars).length;
};

// 加载商品数据
// 商品数据加载
onMounted(() => {
  const id = Number(route.params.id);

  // 使用switch语句根据ID加载不同商品数据
  switch (id) {
    case 1: // 故宫门票
      product.value = {
        id: 1,
        title: '故宫门票',
        price: 60,
        originalPrice: 80,
        discount: 0.75,
        imageUrl: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.hb4dYRpXgtZtA9Lp0TmUmgHaEz?w=240&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
        images: [
          'https://picsum.photos/seed/ticket1-1/800/800',
          'https://picsum.photos/seed/ticket1-2/800/800',
          'https://picsum.photos/seed/ticket1-3/800/800'
        ],
        categoryId: 1,
        stock: 100,
        sales: 256,
        rating: 4.5,
        reviewCount: 24,
        description: '故宫是中国明清两代的皇家宫殿，旧称紫禁城，位于北京中轴线的中心。北京故宫以三大殿为中心，占地面积约72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。',
        detailHtml: `
          <h3>产品详情</h3>
          <p>故宫是中国明清两代的皇家宫殿，旧称紫禁城，位于北京中轴线的中心。北京故宫以三大殿为中心，占地面积约72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。</p>
          <h4>开放时间</h4>
          <ul>
            <li>旺季（4月1日-10月31日）：08:30-17:00</li>
            <li>淡季（11月1日-3月31日）：08:30-16:30</li>
          </ul>
          <h4>注意事项</h4>
          <ol>
            <li>门票当日有效，过期作废</li>
            <li>请携带有效身份证件入园</li>
            <li>1.2米以下儿童免费</li>
            <li>60岁以上老人凭身份证可享受半价优惠</li>
          </ol>
        `,
        reviews: [
          {
            id: 1,
            username: '旅行爱好者',
            userAvatar: 'https://picsum.photos/seed/user1/40/40',
            rating: 5,
            date: '2023-05-15',
            content: '非常棒的体验，故宫的建筑太壮观了，电子票很方便，直接扫码入园，不用排队。',
            images: [
              'https://picsum.photos/seed/review1-1/200/200',
              'https://picsum.photos/seed/review1-2/200/200'
            ]
          },
          {
            id: 2,
            username: '文化探索者',
            userAvatar: 'https://picsum.photos/seed/user2/40/40',
            rating: 4,
            date: '2023-04-22',
            content: '故宫很大，建议早点去，可以逛一整天。讲解器很有帮助，了解了很多历史知识。',
            images: []
          }
        ],
        faqs: [
          {
            question: '电子票如何使用？',
            answer: '购买成功后，您将收到电子票二维码，可直接在入口处扫码入园，无需换票。'
          },
          {
            question: '可以退票吗？',
            answer: '未使用的门票在游玩日期前一天23:59前可申请全额退款，过期后不可退。'
          },
          {
            question: '儿童需要购票吗？',
            answer: '1.2米以下儿童免费，1.2-1.5米儿童可购买儿童票，1.5米以上需购买成人票。'
          }
        ]
      };
      relatedProducts.value = [
        {
          id: 2,
          title: '长城门票',
          price: 40,
          imageUrl: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.SQ6R8xfzpyOeqPkwCLG-pgHaE8?w=240&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
          categoryId: 1,
          description: '世界文化遗产，位于北京，被誉为"天下第一关"，是古代军事防御工程的杰出代表。',
        },
        {
          id: 3,
          title: '颐和园门票',
          price: 30,
          imageUrl: 'https://ts1.tc.mm.bing.net/th/id/R-C.f239bbec543d8938dd9b7a82655df6af?rik=sOBEAMv8vf1gZA&riu=http%3a%2f%2fimg1.qunarzz.com%2ftravel%2fd0%2f1410%2f13%2f13a7db6954db429f213a9cdb.jpg_r_1024x683x95_81ba6e70.jpg&ehk=4dqLpkpy7rBYOej45mAcJlHv0wFeB%2bva85P9wLT8OFc%3d&risl=&pid=ImgRaw&r=0',
          categoryId: 1,
        },
        {
          id: 4,
          title: '天坛公园门票',
          price: 15,
          imageUrl: 'https://picsum.photos/seed/ticket4/200/200',
          categoryId: 1,
        },
        {
          id: 10,
          title: '九寨沟三日游',
          price: 1299,
          imageUrl: 'https://picsum.photos/seed/tour1/200/200',
          categoryId: 3,
        }
      ];
      currentImage.value = product.value.imageUrl;
      break;

    case 2: // 长城门票
      product.value = {
        id: 2,
        title: '长城门票',
        price: 40,
        originalPrice: 50,
        discount: 0.8,
        imageUrl: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.SQ6R8xfzpyOeqPkwCLG-pgHaE8?w=240&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
        images: [
          'https://picsum.photos/seed/ticket2-1/800/800',
          'https://picsum.photos/seed/ticket2-2/800/800'
        ],
        categoryId: 1,
        stock: 80,
        sales: 189,
        rating: 4.7,
        reviewCount: 18,
        description: '世界文化遗产，位于北京，被誉为"天下第一关"，是古代军事防御工程的杰出代表。',
        detailHtml: `
          <h3>产品详情</h3>
          <p>长城是中国古代的军事防御工程，是一道高大、坚固而连绵不断的长垣，用以限隔敌骑的行动。长城不是一道单纯孤立的城墙，而是以城墙为主体，同大量的城、障、亭、标相结合的防御体系。</p>
          <h4>开放时间</h4>
          <ul>
            <li>旺季（4月1日-10月31日）：06:30-19:00</li>
            <li>淡季（11月1日-3月31日）：07:00-18:00</li>
          </ul>
          <h4>注意事项</h4>
          <ol>
            <li>部分路段较为陡峭，建议穿着舒适的运动鞋</li>
            <li>景区内设有缆车，可另行购票乘坐</li>
            <li>请勿在城墙上涂鸦或刻字</li>
          </ol>
        `,
        reviews: [
          {
            id: 1,
            username: '登山爱好者',
            userAvatar: 'https://picsum.photos/seed/user3/40/40',
            rating: 5,
            date: '2023-06-10',
            content: '非常震撼的体验，站在长城上能感受到历史的厚重感。建议早点去避开人流高峰。',
            images: [
              'https://picsum.photos/seed/review3-1/200/200'
            ]
          }
        ],
        faqs: [
          {
            question: '长城有多长？',
            answer: '长城总长度超过2.1万千米，我们游览的是八达岭长城段，长约3.7千米。'
          },
          {
            question: '需要爬多久？',
            answer: '一般游客需要2-3小时完成主要景点的游览，深度游览可能需要4-5小时。'
          }
        ]
      };
      relatedProducts.value = [
        {
          id: 1,
          title: '故宫门票',
          price: 60,
          imageUrl: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.hb4dYRpXgtZtA9Lp0TmUmgHaEz?w=240&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
          categoryId: 1,
        },
        {
          id: 3,
          title: '颐和园门票',
          price: 30,
          imageUrl: 'https://ts1.tc.mm.bing.net/th/id/R-C.f239bbec543d8938dd9b7a82655df6af?rik=sOBEAMv8vf1gZA&riu=http%3a%2f%2fimg1.qunarzz.com%2ftravel%2fd0%2f1410%2f13%2f13a7db6954db429f213a9cdb.jpg_r_1024x683x95_81ba6e70.jpg&ehk=4dqLpkpy7rBYOej45mAcJlHv0wFeB%2bva85P9wLT8OFc%3d&risl=&pid=ImgRaw&r=0',
          categoryId: 1,
        },
        {
          id: 10,
          title: '九寨沟三日游',
          price: 1299,
          imageUrl: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.iBJ2n0ND5lbXMT6pD62_UQHaE1?w=272&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
          categoryId: 3,
        },
        {
          id: 5,
          title: '快捷酒店',
          price: 200,
          imageUrl: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.aYH9Jm4Ti_vkZKrS3a_3wQHaE6?w=240&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
          categoryId: 2,
        }
      ];
      currentImage.value = product.value.imageUrl;
      break;

    case 3: // 颐和园门票
      product.value = {
        id: 3,
        title: '颐和园门票',
        price: 30,
        originalPrice: 40,
        discount: 0.75,
        imageUrl: 'https://ts1.tc.mm.bing.net/th/id/R-C.f239bbec543d8938dd9b7a82655df6af?rik=sOBEAMv8vf1gZA&riu=http%3a%2f%2fimg1.qunarzz.com%2ftravel%2fd0%2f1410%2f13%2f13a7db6954db429f213a9cdb.jpg_r_1024x683x95_81ba6e70.jpg&ehk=4dqLpkpy7rBYOej45mAcJlHv0wFeB%2bva85P9wLT8OFc%3d&risl=&pid=ImgRaw&r=0',
        images: [
          'https://picsum.photos/seed/ticket3-1/800/800',
          'https://picsum.photos/seed/ticket3-2/800/800'
        ],
        categoryId: 1,
        stock: 120,
        sales: 150,
        rating: 4.3,
        reviewCount: 12,
        description: '中国清朝时期皇家园林，前身为清漪园，坐落在北京西郊，与圆明园毗邻。',
        detailHtml: `
          <h3>产品详情</h3>
          <p>颐和园是保存最完整的一座皇家行宫御苑，被誉为"皇家园林博物馆"，也是国家重点文物保护单位。</p>
          <h4>开放时间</h4>
          <ul>
            <li>旺季（4月1日-10月31日）：06:30-18:00</li>
            <li>淡季（11月1日-3月31日）：07:00-17:00</li>
          </ul>
          <h4>注意事项</h4>
          <ol>
            <li>园内面积较大，建议穿着舒适的鞋子</li>
            <li>昆明湖可乘船游览，需另行购票</li>
            <li>请勿攀爬古建筑</li>
          </ol>
        `,
        reviews: [
          {
            id: 1,
            username: '园林爱好者',
            userAvatar: 'https://picsum.photos/seed/user4/40/40',
            rating: 5,
            date: '2023-05-22',
            content: '湖光山色，非常美丽的地方，尤其是长廊的彩绘非常精美。',
            images: [
              'https://picsum.photos/seed/review4-1/200/200'
            ]
          },
          {
            id: 2,
            username: '历史探索者',
            userAvatar: 'https://picsum.photos/seed/user5/40/40',
            rating: 4,
            date: '2023-04-15',
            content: '皇家园林的典范，但游客较多，建议避开周末。',
            images: []
          }
        ],
        faqs: [
          {
            question: '颐和园有多大？',
            answer: '颐和园占地约293公顷，其中水面约占四分之三。'
          },
          {
            question: '建议游玩时间？',
            answer: '建议至少预留3-4小时游览主要景点。'
          },
          {
            question: '园内有餐饮服务吗？',
            answer: '园内设有多个餐饮点，提供简餐和饮料。'
          }
        ]
      };
      relatedProducts.value = [
        {
          id: 1,
          title: '故宫门票',
          price: 60,
          imageUrl: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.hb4dYRpXgtZtA9Lp0TmUmgHaEz?w=240&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
          categoryId: 1,
        },
        {
          id: 2,
          title: '长城门票',
          price: 40,
          imageUrl: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.SQ6R8xfzpyOeqPkwCLG-pgHaE8?w=240&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
          categoryId: 1,
        },
        {
          id: 4,
          title: '天坛公园门票',
          price: 15,
          imageUrl: 'https://picsum.photos/seed/ticket4/200/200',
          categoryId: 1,
        },
        {
          id: 6,
          title: '隐世酒店',
          price: 1000,
          imageUrl: '',

          categoryId: 2,
        }
      ];
      currentImage.value = product.value.imageUrl;
      break;

    case 4: // 天坛公园门票
      product.value = {
        id: 4,
        title: '天坛公园门票',
        price: 15,
        imageUrl: 'https://ts1.tc.mm.bing.net/th/id/R-C.1b1688be7241d44ff375e728c4d040e3?rik=l%2bkJ9FTM6ssydw&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50020%2f5326.jpg_wh860.jpg&ehk=5rVmfq6XAV5G3wtZKmtVw00%2bCOoE2UZWZbT12Gv48HE%3d&risl=&pid=ImgRaw&r=0',
        images: [
          'https://picsum.photos/seed/ticket4-1/800/800'
        ],
        categoryId: 1,
        stock: 200,
        sales: 180,
        rating: 4.2,
        reviewCount: 15,
        description: '天坛是明清两朝帝王祭天、祈谷的场所，是现存中国古代规模最大、伦理等级最高的祭祀建筑群。',
        detailHtml: `
          <h3>产品详情</h3>
          <p>天坛公园在北京市南部，东城区永定门内大街东侧。占地约273万平方米。天坛始建于明永乐十八年(1420年)，清乾隆、光绪时曾重修改建。</p>
          <h4>开放时间</h4>
          <ul>
            <li>06:00-21:00</li>
          </ul>
          <h4>注意事项</h4>
          <ol>
            <li>请勿攀爬古建筑</li>
            <li>请勿随地吐痰</li>
            <li>请勿乱扔垃圾</li>
          </ol>
        `,
        reviews: [
          {
            id: 1,
            username: '游客4',
            userAvatar: 'https://picsum.photos/seed/user6/40/40',
            rating: 4,
            date: '2023-07-05',
            content: '建筑很有特色，公园环境很好。',
            images: ['https://picsum.photos/seed/review4-1/200/200']
          }
        ],
        faqs: [
          {
            question: '天坛有多大？',
            answer: '天坛公园占地约273万平方米。'
          },
          {
            question: '建议游玩时间？',
            answer: '建议2-3小时游览主要景点。'
          }
        ]
      };
      relatedProducts.value = [
        {
          id: 1,
          title: '故宫门票',
          price: 60,
          imageUrl: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.hb4dYRpXgtZtA9Lp0TmUmgHaEz?w=240&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
          categoryId: 1,
        },
        {
          id: 2,
          title: '长城门票',
          price: 40,
          imageUrl: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.SQ6R8xfzpyOeqPkwCLG-pgHaE8?w=240&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
          categoryId: 1,
        },
        {
          id: 3,
          title: '颐和园门票',
          price: 30,
          imageUrl: 'https://ts1.tc.mm.bing.net/th/id/R-C.f239bbec543d8938dd9b7a82655df6af?rik=sOBEAMv8vf1gZA&riu=http%3a%2f%2fimg1.qunarzz.com%2ftravel%2fd0%2f1410%2f13%2f13a7db6954db429f213a9cdb.jpg_r_1024x683x95_81ba6e70.jpg&ehk=4dqLpkpy7rBYOej45mAcJlHv0wFeB%2bva85P9wLT8OFc%3d&risl=&pid=ImgRaw&r=0',
          categoryId: 1,
        },
        {
          id: 13,
          title: '景区纪念钥匙链',
          price: 20,
          imageUrl: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iBUhXoRhZ_e32SE6EgzHsgHaFj?w=264&h=198&c=7&r=0&o=5&dpr=1.3&pid=1.7',
          categoryId: 4,
        }
      ];
      currentImage.value = product.value.imageUrl;
      break;

    case 5: // 快捷酒店
      product.value = {
        id: 5,
        title: '快捷酒店',
        price: 200,
        originalPrice: 250,
        discount: 0.8,
        imageUrl: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.aYH9Jm4Ti_vkZKrS3a_3wQHaE6?w=240&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
        images: [
          'https://picsum.photos/seed/hotel1-1/800/800',
          'https://picsum.photos/seed/hotel1-2/800/800'
        ],
        categoryId: 2,
        stock: 50,
        sales: 120,
        rating: 3.8,
        reviewCount: 30,
        description: '经济实惠的连锁酒店，提供舒适的住宿环境和优质的服务。',
        detailHtml: `
          <h3>酒店详情</h3>
          <p>我们的快捷酒店位于市中心，交通便利，周边餐饮、购物设施齐全。房间干净整洁，提供免费WiFi和早餐。</p>
          <h4>设施服务</h4>
          <ul>
            <li>免费WiFi</li>
            <li>24小时前台</li>
            <li>自助早餐</li>
            <li>行李寄存</li>
          </ul>
          <h4>入住信息</h4>
          <ol>
            <li>入住时间：14:00</li>
            <li>退房时间：12:00</li>
            <li>需提供有效身份证件</li>
          </ol>
        `,
        reviews: [
          {
            id: 1,
            username: '游客5',
            userAvatar: 'https://picsum.photos/seed/user7/40/40',
            rating: 3,
            date: '2023-06-15',
            content: '性价比高，基本需求都能满足。',
            images: ['https://picsum.photos/seed/review5-1/200/200']
          }
        ],
        faqs: [
          {
            question: '可以提前入住吗？',
            answer: '视房间情况而定，建议提前联系酒店。'
          },
          {
            question: '有停车场吗？',
            answer: '酒店提供收费停车场。'
          }
        ]
      };
      relatedProducts.value = [
        {
          id: 6,
          title: '隐世酒店',
          price: 1000,
          imageUrl: '',

          categoryId: 2,
        },
        {
          id: 1,
          title: '故宫门票',
          price: 60,
          imageUrl: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.hb4dYRpXgtZtA9Lp0TmUmgHaEz?w=240&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
          categoryId: 1,
        },
        {
          id: 10,
          title: '九寨沟三日游',
          price: 1299,
          imageUrl: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.iBJ2n0ND5lbXMT6pD62_UQHaE1?w=272&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
          categoryId: 3,
        },
        {
          id: 13,
          title: '景区纪念钥匙链',
          price: 20,
          imageUrl: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iBUhXoRhZ_e32SE6EgzHsgHaFj?w=264&h=198&c=7&r=0&o=5&dpr=1.3&pid=1.7',
          categoryId: 4,
        }
      ];
      currentImage.value = product.value.imageUrl;
      break;

    case 6: // 隐世酒店
      product.value = {
        id: 6,
        title: '隐世酒店',
        price: 1000,
        imageUrl: '',

        images: [
          'https://picsum.photos/seed/hotel2-1/800/800',
          'https://picsum.photos/seed/hotel2-2/800/800',
          'https://picsum.photos/seed/hotel2-3/800/800'
        ],
        categoryId: 2,
        stock: 20,
        sales: 45,
        rating: 4.9,
        reviewCount: 18,
        description: '高端精品酒店，提供私密、奢华的住宿体验。',
        detailHtml: `
          <h3>酒店详情</h3>
          <p>隐世酒店位于风景优美的郊区，提供私人管家服务、高端餐饮和水疗设施。每个房间都经过精心设计，确保客人的隐私和舒适。</p>
          <h4>设施服务</h4>
          <ul>
            <li>私人管家</li>
            <li>水疗中心</li>
            <li>高端餐饮</li>
            <li>无边泳池</li>
          </ul>
          <h4>入住信息</h4>
          <ol>
            <li>入住时间：15:00</li>
            <li>退房时间：12:00</li>
            <li>需提前预约</li>
          </ol>
        `,
        reviews: [
          {
            id: 1,
            username: '游客6',
            userAvatar: 'https://picsum.photos/seed/user8/40/40',
            rating: 5,
            date: '2023-05-20',
            content: '绝对值得这个价格，服务无可挑剔！',
            images: ['https://picsum.photos/seed/review6-1/200/200']
          }
        ],
        faqs: [
          {
            question: '有接送服务吗？',
            answer: '提供收费接送服务，需提前预约。'
          },
          {
            question: '可以带宠物吗？',
            answer: '部分房型允许携带宠物，需额外收费。'
          }
        ]
      };
      relatedProducts.value = [
        {
          id: 5,
          title: '快捷酒店',
          price: 200,
          imageUrl: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.aYH9Jm4Ti_vkZKrS3a_3wQHaE6?w=240&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
          categoryId: 2,
        },
        {
          id: 10,
          title: '九寨沟三日游',
          price: 1299,
          imageUrl: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.iBJ2n0ND5lbXMT6pD62_UQHaE1?w=272&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
          categoryId: 3,
        },
        {
          id: 1,
          title: '故宫门票',
          price: 60,
          imageUrl: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.hb4dYRpXgtZtA9Lp0TmUmgHaEz?w=240&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
          categoryId: 1,
        },
        {
          id: 13,
          title: '景区纪念钥匙链',
          price: 20,
          imageUrl: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iBUhXoRhZ_e32SE6EgzHsgHaFj?w=264&h=198&c=7&r=0&o=5&dpr=1.3&pid=1.7',
          categoryId: 4,
        }
      ];
      currentImage.value = product.value.imageUrl;
      break;

    case 10: // 九寨沟三日游
      product.value = {
        id: 10,
        title: '九寨沟三日游',
        price: 1299,
        originalPrice: 1599,
        discount: 0.81,
        imageUrl: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.iBJ2n0ND5lbXMT6pD62_UQHaE1?w=272&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
        images: [
          'https://picsum.photos/seed/tour1-1/800/800',
          'https://picsum.photos/seed/tour1-2/800/800'
        ],
        categoryId: 3,
        stock: 30,
        sales: 65,
        rating: 4.7,
        reviewCount: 22,
        description: '探索九寨沟的自然奇观，体验藏族文化，享受舒适的住宿和美食。',
        detailHtml: `
          <h3>行程详情</h3>
          <p>九寨沟三日游包含往返交通、两晚住宿、景区门票和导游服务。行程包括九寨沟核心景区游览、藏族村寨参观和特色餐饮体验。</p>
          <h4>行程安排</h4>
          <ul>
            <li>第一天：成都出发，乘车前往九寨沟</li>
            <li>第二天：九寨沟景区全天游览</li>
            <li>第三天：藏族村寨参观，返回成都</li>
          </ul>
          <h4>注意事项</h4>
          <ol>
            <li>高原地区，注意防晒和保暖</li>
            <li>建议携带常用药品</li>
            <li>尊重当地民族风俗</li>
          </ol>
        `,
        reviews: [
          {
            id: 1,
            username: '游客10',
            userAvatar: 'https://picsum.photos/seed/user9/40/40',
            rating: 4,
            date: '2023-07-01',
            content: '风景太美了，导游也很专业。',
            images: ['https://picsum.photos/seed/review10-1/200/200']
          }
        ],
        faqs: [
          {
            question: '出发日期？',
            answer: '每周一、三、五出发。'
          },
          {
            question: '包含哪些费用？',
            answer: '包含交通、住宿、门票和导游服务，不含个人消费。'
          }
        ]
      };
      relatedProducts.value = [
        {
          id: 1,
          title: '故宫门票',
          price: 60,
          imageUrl: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.hb4dYRpXgtZtA9Lp0TmUmgHaEz?w=240&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
          categoryId: 1,
        },
        {
          id: 5,
          title: '快捷酒店',
          price: 200,
          imageUrl: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.aYH9Jm4Ti_vkZKrS3a_3wQHaE6?w=240&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
          categoryId: 2,
        },
        {
          id: 6,
          title: '隐世酒店',
          price: 1000,
          imageUrl: '',

          categoryId: 2,
        },
        {
          id: 13,
          title: '景区纪念钥匙链',
          price: 20,
          imageUrl: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iBUhXoRhZ_e32SE6EgzHsgHaFj?w=264&h=198&c=7&r=0&o=5&dpr=1.3&pid=1.7',
          categoryId: 4,
        }
      ];
      currentImage.value = product.value.imageUrl;
      break;

    case 13: // 景区纪念钥匙链
      product.value = {
        id: 13,
        title: '景区纪念钥匙链',
        price: 20,
        imageUrl: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iBUhXoRhZ_e32SE6EgzHsgHaFj?w=264&h=198&c=7&r=0&o=5&dpr=1.3&pid=1.7',
        images: [
          'https://picsum.photos/seed/good1-1/800/800',
          'https://picsum.photos/seed/good1-2/800/800'
        ],
        categoryId: 4,
        stock: 150,
        sales: 85,
        rating: 4.2,
        reviewCount: 35,
        description: '精美的景区纪念钥匙链，刻有景区标志性建筑图案。',
        detailHtml: `
          <h3>产品详情</h3>
          <p>景区纪念钥匙链采用优质金属材料制作，表面镀金处理，不易褪色。尺寸约5cm×3cm，重量约30g。</p>
          <h4>产品规格</h4>
          <ul>
            <li>材质：合金</li>
            <li>尺寸：5cm×3cm</li>
            <li>重量：30g</li>
          </ul>
          <h4>注意事项</h4>
          <ol>
            <li>避免接触化学物品</li>
            <li>请勿用力拉扯</li>
            <li>请勿让儿童玩耍</li>
          </ol>
       `, reviews: [
          {
            id: 1,
            username: '游客10',
            userAvatar: 'https://picsum.photos/seed/user9/40/40',
            rating: 4,
            date: '2023-07-01',
            content: '风景太美了，导游也很专业。',
            images: ['https://picsum.photos/seed/review10-1/200/200']
          }
        ],
        faqs: [
          {
            question: '出发日期？',
            answer: '每周一、三、五出发。'
          },
          {
            question: '包含哪些费用？',
            answer: '包含交通、住宿、门票和导游服务，不含个人消费。'
          }
        ]
      };
      relatedProducts.value = [
        {
          id: 1,
          title: '故宫门票',
          price: 60,
          imageUrl: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.hb4dYRpXgtZtA9Lp0TmUmgHaEz?w=240&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
          categoryId: 1,
        },
        {
          id: 5,
          title: '快捷酒店',
          price: 200,
          imageUrl: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.aYH9Jm4Ti_vkZKrS3a_3wQHaE6?w=240&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
          categoryId: 2,
        },
        {
          id: 6,
          title: '隐世酒店',
          price: 1000,
          imageUrl: '',

          categoryId: 2,
        },
        {
          id: 3,
          title: '颐和园门票',
          price: 30,
          imageUrl: 'https://ts1.tc.mm.bing.net/th/id/R-C.f239bbec543d8938dd9b7a82655df6af?rik=sOBEAMv8vf1gZA&riu=http%3a%2f%2fimg1.qunarzz.com%2ftravel%2fd0%2f1410%2f13%2f13a7db6954db429f213a9cdb.jpg_r_1024x683x95_81ba6e70.jpg&ehk=4dqLpkpy7rBYOej45mAcJlHv0wFeB%2bva85P9wLT8OFc%3d&risl=&pid=ImgRaw&r=0',
          categoryId: 1,
        },
      ];
      currentImage.value = product.value.imageUrl;
      break;
    default:
      break;
  }
})
// 跳转到商品详情页
const goToProductDetail = (id) => {
  router.push(`/product/${id}`)
      .then(() => {
        window.location.reload(); // 强制刷新整个页面[3,6](@ref)
      });

};

// 显示图片预览
const showImagePreview = (img) => {
  previewImage.value = img;
  imagePreviewVisible.value = true;
};

// 用户登录
const login = () => {
  router.push('/login');
};

// 用户注册
const register = () => {
  router.push('/register');
};
</script>

<style scoped>
/* 与商城页面一致的样式 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  margin: 40px 0 20px;
  text-align: center;
}

/* 顶部导航栏样式 */
.header {
  background-color: #409eff;
  color: white;
  padding: 15px 0;
  margin-bottom: 20px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo h1 {
  margin: 0;
  font-size: 24px;
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.nav ul li {
  margin-right: 20px;
}

.nav-link {
  color: white;
  text-decoration: none;
  position: relative;
  transition: color 0.3s;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -5px;
  left: 0;
  background-color: white;
  transition: width 0.3s ease-in-out;
}

.nav-link:hover {
  color: #e0e0e0;
}

.nav-link:hover::after {
  width: 100%;
}

.user-actions {
  display: flex;
  gap: 10px;
}

/* 商品详情内容样式 */
.product-detail-content {
  padding: 20px 0;
}

.product-image-container {
  margin-bottom: 20px;
}

.main-product-image {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 15px;
}

.thumbnail-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.product-thumbnail {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.3s;
}

.product-thumbnail:hover {
  border-color: #409eff;
}

.thumbnail-active {
  border-color: #409eff;
}

.product-info {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.product-title {
  font-size: 28px;
  margin: 0 0 10px;
  color: #333;
}

.product-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  color: #666;
  font-size: 14px;
}

.price-section {
  margin: 20px 0;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 6px;
}

.current-price {
  font-size: 28px;
  color: #f56c6c;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 10px;
}

.discount-badge {
  background-color: #f56c6c;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 14px;
}

.original-price {
  text-decoration: line-through;
  color: #999;
  font-size: 16px;
}

.saved-price {
  color: #67c23a;
  font-size: 16px;
}

.price-label {
  margin-right: 8px;
  color: #666;
}

.product-description {
  margin: 25px 0;
  line-height: 1.6;
}

.quantity-selector {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 25px 0;
}

.quantity-label {
  font-weight: bold;
}

.stock-info {
  color: #666;
  font-size: 14px;
}

.action-buttons {
  display: flex;
  gap: 15px;
  margin: 30px 0;
}

.delivery-info {
  color: #666;
  font-size: 14px;
}

.delivery-info p {
  margin: 8px 0;
}

.delivery-info i {
  margin-right: 8px;
}

/* 商品详情选项卡样式 */
.product-tabs {
  margin: 40px 0;
}

.tab-content {
  padding: 20px;
  line-height: 1.8;
}

/* 评价区域样式 */
.reviews-container {
  padding: 20px;
}

.review-summary {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.overall-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 150px;
}

.rating-value {
  font-size: 36px;
  font-weight: bold;
  color: #f56c6c;
}

.rating-count {
  color: #666;
  font-size: 14px;
}

.rating-distribution {
  flex: 1;
  padding-left: 30px;
}

.rating-bar {
  display: flex;
  align-items: center;
  margin: 8px 0;
}

.stars {
  width: 50px;
  color: #666;
}

.count {
  width: 40px;
  text-align: right;
  color: #666;
}

.review-list {
  margin-top: 20px;
}

.review-item {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.review-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.review-user {
  margin-left: 15px;
  flex: 1;
}

.username {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

.review-date {
  color: #999;
  font-size: 14px;
}

.review-content {
  line-height: 1.6;
  margin-bottom: 15px;
}

.review-images {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.review-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.3s;
}

.review-image:hover {
  transform: scale(1.05);
}

.no-reviews {
  text-align: center;
  padding: 40px 0;
  color: #999;
}

/* 常见问题样式 */
.faq-container {
  padding: 20px;
}

.no-faqs {
  text-align: center;
  padding: 40px 0;
  color: #999;
}

/* 相关商品样式 */
.related-products {
  margin-top: 50px;
}

.product-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.product-info {
  padding: 15px;
}

.product-title {
  font-size: 16px;
  margin: 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 10px;
}

.current-price {
  color: #f56c6c;
  font-weight: bold;
}

.original-price {
  color: #999;
  text-decoration: line-through;
  font-size: 14px;
}

/* 页脚样式 */
.footer {
  background-color: #f5f7fa;
  padding: 40px 0 20px;
  margin-top: 50px;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.footer-section {
  width: 30%;
  margin-bottom: 20px;
}

.footer-section h4 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #333;
}

.footer-section p {
  color: #666;
  line-height: 1.6;
}

.social-links {
  display: flex;
  gap: 15px;
}

.social-link {
  color: #666;
  font-size: 20px;
  transition: color 0.3s;
}

.social-link:hover {
  color: #409eff;
}

.copyright {
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
  color: #999;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .product-detail-content .el-row {
    flex-direction: column;
  }

  .product-detail-content .el-col {
    width: 100%;
  }

  .main-product-image {
    height: 400px;
  }

  .footer-section {
    width: 48%;
  }
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    text-align: center;
  }

  .nav ul {
    justify-content: center;
    margin: 15px 0;
  }

  .main-product-image {
    height: 300px;
  }

  .action-buttons {
    flex-direction: column;
  }

  .action-buttons .el-button {
    width: 100%;
    margin-bottom: 10px;
  }

  .footer-section {
    width: 100%;
  }

  .related-products .el-col {
    width: 50%;
  }
}

@media (max-width: 576px) {
  .main-product-image {
    height: 250px;
  }

  .product-title {
    font-size: 24px;
  }

  .review-summary {
    flex-direction: column;
  }

  .overall-rating {
    margin-bottom: 20px;
  }

  .rating-distribution {
    padding-left: 0;
  }

  .related-products .el-col {
    width: 100%;
  }
}
/* 全局覆盖样式 */ .product-detail-container .el-tabs--border-card { border: none; box-shadow: none; } .product-detail-container .el-tabs--border-card > .el-tabs__header { background-color: #f5f7fa; border-bottom: none; } .product-detail-container .el-tabs--border-card > .el-tabs__header .el-tabs__item { border: none; margin-right: 5px; border-radius: 4px; } .product-detail-container .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active { background-color: #409eff; color: white; } .product-detail-container .el-collapse-item__header { font-size: 16px; padding: 0 20px; } .product-detail-container .el-collapse-item__content { padding: 20px; color: #666; }
</style>